<template>
    <div class="center">
        <el-alert title="请选择一个集团，后续操作将为本次选择的集团设置相应的管理员。" type="success">
        </el-alert>
        <div class="content">
            <div class="item" v-for="(item,index) in groupList" :key="index" @click="handleChange(item.pkGroup)">
                <div @click="handleChange(item.pkGroup)">
                    <input class="radio_type" type="radio" name="type" id="radio1"
                        :checked="checkedValue == item.pkGroup" />
                    <label for="radio1" @click="handleChange(item.pkGroup)">{{item.groupName}}</label>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import * as groupService from '@/api/upms/group'
    export default {
        data() {
            return {
                checkedValue: 0,
                groupList: [],
                treeLoading: false
            }
        },
        created() {
            this.getGroupList()
        },
        methods: {
            // 加载集团列表
            getGroupList() {
                this.treeLoading = true;
                groupService.getgrouplist().then(data => {
                    this.groupList = data;
                    this.treeLoading = false;
                });
            },
            handleChange(val) {
                if (val) {
                    console.log(val)
                    this.checkedValue = val
                    this.$emit("setCurrentGroup", val)
                } else {
                    this.$message.error("选择错误！")
                }
            }
        }
    }
</script>
<style scoped>
    .center {

        width: 80%;
        margin: 0 auto;
    }

    .content {
        max-height: 420px;
        overflow: hidden;
        overflow-y: auto;
        margin-top: 15px;
        padding: 0 20px;
    }

    .content::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .content::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(184, 184, 184, 0.1);
        background: #c0c0c0;
    }

    .content::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(49, 49, 49, 0.1);
        border-radius: 10px;
        background: #EDEDED;
    }

    * {
        cursor: pointer;
    }

    .item {
        background: rgb(121, 187, 255);
        height: 50px;
        width: 100%;
        margin: 5px 0px;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        line-height: 50px;
    }











    label {
        line-height: 28px;
        display: inline-block;
        margin-left: 10px;
        margin-right: 15px;
        color: #f3f3f3;
        font-size: 14px;
    }

    .radio_type {
        width: 20px;
        height: 20px;
        appearance: none;
        position: relative;
        margin-left: 10px;
    }

    .radio_type:before {
        content: '';
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #409EFF;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }

    .radio_type:checked:before {
        content: '';
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #409EFF;
        background: #409EFF;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }

    .radio_type:checked:after {
        content: '';
        width: 10px;
        height: 5px;
        line-height: 5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 6px;
        left: 5px;
        vertical-align: middle;
        transform: rotate(-45deg);
    }

    .radio_type:checked+label {
        color: #fff;
    }
</style>